<template>
  <div class="theme">
    <el-scrollbar @scroll="onScroll" height="calc(100vh - 160px)" class="left-content">
      <div class="left">
        <el-form ref="ruleFormRef" :model="form" :rules="rules" class="demo-ruleForm" label-position="top">
          <!-- <Card :cardList="cardList" :form="form" /> -->
          <div class="card-box" id="a">
            <div class="card">
              <div class="card-left">
                <div class="title">通话录音</div>
                <div class="text">
                  系统默认录音格式为单轨录音，即录音时不区分声道，客户侧和员工侧声音混合录音。双轨录音区分左右声道，客户侧和员工侧是不同声道，便于质检。注意：通话录音系统默认保存3个月，请及时下载备份
                </div>
              </div>
            </div>
            <el-divider />
            <div class="form-item">
              <span class="item-title">录音方式：</span>
              <el-radio-group v-model="form.recordingType">
                <el-radio label="link">通话录音</el-radio>
                <el-radio label="full">全程录音</el-radio>
              </el-radio-group>
            </div>
            <div class="form-item">
              <span class="item-title">录音声道：</span>
              <el-radio-group v-model="form.recordingChannel">
                <el-radio label="single">单轨录音</el-radio>
                <el-radio label="double">双轨录音</el-radio>
                <el-radio label="multi">双轨多文件</el-radio>
              </el-radio-group>
            </div>
            <div class="form-item">
              <span class="item-title">录音格式：</span>
              <el-radio-group v-model="form.mediaType">
                <el-radio label="mp3">MP3</el-radio>
                <el-radio label="wav">WAV</el-radio>
              </el-radio-group>
            </div>
            <!-- <el-form-item label="录音方式" prop="recordingType">
              <el-radio-group v-model="form.recordingType">
                <el-radio label="link">通话录音</el-radio>
                <el-radio label="full">全程录音</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="录音声道" prop="recordingChannel">
              <el-radio-group v-model="form.recordingChannel">
                <el-radio label="single">单轨录音</el-radio>
                <el-radio label="double">双轨录音</el-radio>
                <el-radio label="multi">双轨多文件</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="录音格式" prop="mediaType">
              <el-radio-group v-model="form.mediaType">
                <el-radio label="mp3">MP3</el-radio>
                <el-radio label="wav">WAV</el-radio>
              </el-radio-group>
            </el-form-item> -->
          </div>
          <div class="card-box" id="b">
            <div class="card">
              <div class="card-left">
                <div class="title">外呼记忆</div>
                <div class="text">
                  开启时，当员工外呼（适用于预览外呼，不适用自动外呼）客户号码，无论是否被接听，此客户号码再次来电时将优先转给此员工接待。如果座席忙碌或不在线时系统转给选择语音导航
                </div>
              </div>
              <div class="card-right">
                <el-switch size="small" v-model="form.callMemory" class="ml-2" />
              </div>
            </div>
            <div v-if="form.callMemory">
              <el-divider />
              <el-form-item prop="callMemoryDuration">
                <template #label>
                  <span
                    >有效期
                    <span class="label-tip"
                      >记忆的最大期限，将在有效期内找到上一次外呼客户的人员进行记忆，范围1～30间整数
                    </span>
                  </span>
                </template>

                <el-input v-model.number="form.callMemoryDuration" placeholder="请输入" style="width: 300px">
                  <template #append>天</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="callMemoryIvrId">
                <template #label>
                  <span>
                    语音导航
                    <span class="label-tip">记忆员工忙碌或者不在线时，客户来电转入此语音导航 </span>
                  </span>
                </template>
                <el-select v-model="form.callMemoryIvrId" filterable placeholder="请选择" style="width: 300px">
                  <el-option
                    v-for="(item, index) in ivrCacheList"
                    :key="index"
                    :label="item.name"
                    :value="item.nodeId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="callMemoryServiceNo">
                <template #label>
                  服务号
                  <span class="label-tip"
                    >当客户通过选中服务号来电的时候，会直接转给记忆员工。否则将进入服务号对应的语音导航流程。不选择全部号码生效
                  </span>
                </template>
                <el-select v-model="form.callMemoryServiceNo" filterable placeholder="请选择" style="width: 300px">
                  <el-option
                    v-for="(item, index) in serveNumList"
                    :key="index"
                    :label="item.number"
                    :value="item.number"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </el-scrollbar>

    <div class="right">
      <!-- <Nav :navArr="navArr" className="card" @onScrollNav="onScrollNav"></Nav> -->
      <Nav :headers="navArr" @onScrollNav="onScrollNav" :toId="toId"></Nav>
    </div>
    <div class="footer">
      <div class="footer-button">
        <el-button @click="save" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
// import Card from '@/common/components/card/index.vue'
import Nav from '@/common/components/right-nav/index.vue'
import { fetchData } from '@app/call-center/apis/client-setting'
import { saveData } from '@app/call-center/apis/caller-setting'
import { ElMessage } from 'element-plus'
// import { deepClone } from '@/common/utils/common'
import mcCache from '@/common/utils/mc-get-cache'
import { userModule } from '@/common/store/modules/user'
export default defineComponent({
  name: 'AdminMain',
  components: {
    // Card,
    Nav
  },
  // ----------------生命周期-----------------------
  setup() {
    const USERMODULE = userModule()
    const state = reactive({
      navArr: [
        { name: '双轨录音', id: 'a' },
        { name: '外呼记忆', id: 'b' }
      ],
      toId: 'a',
      serveNumList: [{ number: '' }], //服务号下拉框数据
      ivrCacheList: [{ name: '', nodeId: '' }], //语音导航下拉框数据
      cardList: [
        {
          id: 'a',
          type: 'switch',
          name: 'recordingChannel',
          title: '双轨录音',
          content:
            '系统默认录音格式为单轨录音，即录音时不区分声道，客户侧和员工侧声音混合录音。开启后，录音区分左右声道，客户侧和员工侧是不同声道，便于质检。三方通话时，所有通话员工在同一声道，客户在另一声道。录音文件均为MP3格式。'
        },
        {
          id: 'b',
          type: 'switch',
          name: 'callMemory',
          title: '外呼记忆',
          content:
            '开启时，当员工外呼（不包括自动外呼）客户号码，无论是否被接听，此客户号码再次来电时将优先转给次员工接待。如果座席忙碌或不在线时系统转给选择语音导航。'
        }
      ],
      form: {
        recordingChannel: true, //录音声道
        callMemory: true, //是否开启外呼记忆
        recordingType: 'link', //录音方式
        mediaType: 'mp3', //录音格式
        callMemoryServiceNo: '',
        callMemoryIvrId: '',
        callMemoryDuration: ''
      },
      rules: {
        callMemoryDuration: [{ required: true, message: '请输入1-30内的整数', type: 'number', min: 1, max: 30 }],
        callMemoryIvrId: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    })
    function callList() {
      fetchData({ accountId: USERMODULE.accountId || '' }).then((res) => {
        if (res.success) {
          state.form = res.data || {}
        }
      })
    }
    const instance: any = getCurrentInstance()
    function save() {
      instance?.refs.ruleFormRef.validate((valid: boolean) => {
        if (valid) {
          saveData({ accountId: USERMODULE.accountId || '', ...state.form }).then((res) => {
            if (res.success) {
              ElMessage({ message: '保存成功', type: 'success' })
            }
          })
        }
      })
    }
    // 滚动事件，对应右侧更改
    const onScroll = (obj: any) => {
      // const arrayOfDocFonts = document.getElementsByClassName('info-alert')
      for (var i = 0; i < state.navArr.length; i++) {
        if (state.navArr[i].id != '') {
          const offsetHight = (document as any).getElementById(`${state.navArr[i].id}`).offsetTop
          if (obj.scrollTop >= offsetHight) {
            state.toId = state.navArr[i].id
          }
        }
      }
    }
    function onScrollNav(link: string) {
      if ((document as any).getElementById(link)) {
        ;(document as any).getElementById(link).scrollIntoView({ behavior: 'smooth' })
      }
    }
    onMounted(async () => {
      callList()
      const ivrCache = await mcCache.$getCache('ivrNav')
      const serveNum = await mcCache.$getCache('serveNum')
      state.serveNumList = serveNum
      state.ivrCacheList = ivrCache
    })
    return { onScrollNav, onScroll, save, ...toRefs(state) }
  }
})
</script>

<style lang="stylus" scoped>
  .card
    border-radius: 4px;
    margin-bottom 16px
    display: flex
    justify-content: space-between;
    .card-right
      align-items: center;
      display: flex;
      padding-left 40px
    .title
      font-family: 'PingFang SC';
      font-size 14px
      margin-bottom 8px
      font-weight: 500;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.88);
    .text
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.001em;
      color: rgba(0, 0, 0, 0.6);
.card-box
  border: 1px solid var(--mc-gray4-color)
  padding: 16px
  margin-bottom 16px
  border-radius: 4px;
  .card-icon
    display: flex
    align-items: center
  .add
    color: var(--mc-main-color);
    font-size: 14px
    cursor:pointer
.form-item
  font-weight: 400
  font-size: 14px
  margin-top: 16px
  line-height: 20px;
  letter-spacing: 0.001em;
  color: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  .item-title
    margin-right:25px
.label-tip
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.001em;
    color: rgba(0, 0, 0, 0.38);
.left-content
  width: 100%
#b
  margin-bottom 60px
.el-divider--horizontal
  margin 16px 0
.theme
  display: flex
  width: 100%
  padding-top: 24px
  .left
    width 80%
  .right
    width: 15%
    position absolute
    right 0
  .footer
    position: fixed
    bottom: 0
    left: 240px
    height 60px
    width calc(100% - 240px)
    box-shadow: 0 0 4px 0 #e0e6f0
    background #fff
    display: flex
    justify-content: end
    align-items: center
    .footer-button
      padding 0 24px
</style>
